<template>
  <div
    class="search-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '' }"
  >
    <!-- <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" /> -->
    <!-- <Search
      ref="topSearch"
      class="search"
      placeholder="任务编号|设备编号|设备名称"
      :isAdd="false"
      :isScreen="false"
      :isType="false"
    ></Search> -->
    <div class="formgroup">
      <span class="title">物品编号</span>
      <van-field v-model="params.goodsCode" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">物品名称</span>
      <van-field v-model="params.goodsName" label="" placeholder="请输入" maxlength="30"/>
      <div class="bottomLine"></div>
      <span class="title">物品规格</span>
      <van-field v-model="params.spec" label="" placeholder="请输入" />
      <div class="bottomLine"></div>
      <span class="title">分类</span>
      <van-field
        :is-link="!prodcname"
        readonly
        name="picker"
        @click="treeSelectVisible = true"
        placeholder="请选择"
        v-model="prodcname"
      >
      </van-field>
      <div class="bottomLine"></div>
      <span class="title">类型</span>
      <van-field-checkbox
        :supportClear="true"
        placeholder="请选择"
        v-model="selectedType"
        :columns="typeOptions"
        :option="{ label: 'text', value: 'value' }"
      />
    </div>
    <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div>

    <!--分类树选择 -->
    <van-popup v-model="treeSelectVisible" position="bottom">
      <van-tree-select
        @click-item="selectChange"
        v-model="params.category"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndexId"
        :items="goodsCatagoryList"
      />
    </van-popup>

    <contact-pickers
      :visible="ddthrVisible"
      :max="5"
      @closePicker="ddthrVisible = false"
      @confirm="confirmDdtjr"
    >
    </contact-pickers>
    <van-popup v-model="typeVisible" position="bottom">
      <van-picker
        :columns="typeOptions"
        @confirm="typeConfirm"
        @cancel="typeVisible = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>

<script>
const formP = {
  goodsCode: "",
  goodsName: "",
  category: "",
  type: "",
  spec: "",
};
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import moment from "moment";
import { getDictModel, categoryGetTree } from "@/api/system";
import Search from "@/components/search";
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
import { nextTick } from "process";
export default {
  name: "search",
  components: { Navbar, ContactPickers, Search, VanFieldCheckbox },
  data() {
    return {
      treeSelectVisible: false,
      activeIndexId: "",
      activeId: 1,
      goodsCatagoryList: [],
      prodcname: "",

      title: this.$route.meta.title,
      ddthrVisible: false,
      reportDateStartVisible: false,
      reportDateEndVisible: false,
      createdTimeBeginVisible: false,
      createdTimeEndVisible: false,
      typeVisible: false,
      fzrName: "", //生产负责人
      createdByName: "", //订单提交人
      rtitle: "",
      rname: "", //search
      minDate1: new Date(),
      minDate2: new Date(),
      createEndMinDate: new Date(2020, 1, 1),
      promiseEndMinDate: new Date(2020, 1, 1),
      maxDate: new Date(2025, 10, 1),
      params: Object.assign({}, formP),
      createdTimeRead: "",
      reportDateRead: "",
      typeOptions: [],
      statusOptions: [{ text: "状态", value: "" }],
      delType: false,
      statusVisible: false,
      selectedType: [],
    };
  },
  props: {
    propsForSon: {
      type: Object,
      default: {},
    },
  },
  watch: {
    propsForSon(newVal) {
      console.log(newVal, "newValnewVal");
      // this.$refs.topSearch.value = newVal.keyword;
      this.params = newVal;
      this.selectedType = newVal.type
        ? newVal.type.split(",")
        : [];
    },
  },
  computed: {},
  mounted() {},
  created() {
    // 字典接口
    getDictModel({ dictCode: "device_check_task_status" }).then((res) => {
      this.statusOptions.push(...res.result);
    });
    // 字典接口
    getDictModel({ dictCode: "wms_goods_type" }).then((res) => {
      res.result.forEach((item) => {
        item.text = item.title;
      });
      this.typeOptions.push(...res.result);
    });
    categoryGetTree({ code: "B05" }).then((res) => {
      this.goodsCatagoryList = res.result[0].children;
      this.cloneTree(this.goodsCatagoryList);
    });
  },
  methods: {
    //遍历树
    cloneTree(list) {
      console.log("+++++++++++++++++++++++++");
      console.log(list);
      list.forEach((item) => {
        item.text = item.name;
        if (item.children.length != 0) {
          this.cloneTree(item.children);
        }
      });
    },
    // 分类树
    selectChange(item) {
      console.log(item);
      if (this.params.category == item.id) {
        this.params.category = "";
        this.activeId = "";
        this.prodcname = "";
        this.treeSelectVisible = false;
      } else {
        this.params.category = item.id;
        this.prodcname = item.text;
        this.treeSelectVisible = false;
      }

      // this.searchQuery();
      // this.$refs.item.toggle();
    },
    isCancel() {
      this.params.typeText = "";
      this.params.type = "";
      this.delType = !this.delType;
    },
    stCancel() {
      nextTick(() => {
        this.params.taskStatus = "";
        this.params.taskStatusText = "";
      });
      this.delType = !this.delType;
      console.log("fuck", this.params);
    },
    typeConfirm(v) {
      if (!v) {
        this.typeVisible = false;
        return;
      }
      this.params.typeText = v.text;
      this.params.type = v.value;
      this.typeVisible = false;
    },
    statusConfirm(v) {
      if (!v) {
        this.statusVisible = false;
        return;
      }
      this.params.taskStatusText = v.text;
      this.params.taskStatus = v.value;
      this.statusVisible = false;
    },
    fileChange(ids) {
      console.log("父组件" + ids);
    },
    // 选择汇报时间开始时间
    confirmReportStartTime(date) {
      this.promiseEndMinDate = date;
      this.params.reportDateStart = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.params.reportDateEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.reportDateStartVisible = false;
      this.reportDateEndVisible = true;
      this.reportDateRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消汇报时间开始时间
    cancelReportStartTime() {
      this.params.reportDateStart = "";
      this.params.reportDateEnd = "";
      this.reportDateRead = "";
      this.reportDateStartVisible = false;
    },
    // 选择汇报时间结束时间
    confirmReportEndTime(date) {
      this.params.reportDateEnd = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.reportDateRead =
        this.reportDateRead + "~" + moment(date).format("YYYY-MM-DD");
      this.reportDateEndVisible = false;
    },
    // 取消汇报时间结束时间
    cancelReportEndTime() {
      this.params.reportDateStart = "";
      this.params.reportDateEnd = "";
      this.reportDateRead = "";
      this.reportDateEndVisible = false;
    },
    // 选择订单提交开始时间
    confirmCreatedStartTime(date) {
      this.createEndMinDate = date;
      this.params.createDateStart = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.params.createDateEnd = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible = false;
      this.createdTimeEndVisible = true;
      this.createdTimeRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消订单提交开始时间
    cancelCreatedStartTime() {
      this.params.createDateStart = "";
      this.params.createDateEnd = "";
      this.createdTimeRead = "";
      this.createdTimeBeginVisible = false;
    },
    // 选择订单提交结束时间
    confirmCreatedEndTime(date) {
      this.params.createDateEnd = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.createdTimeRead =
        this.createdTimeRead + "~" + moment(date).format("YYYY-MM-DD");
      this.createdTimeEndVisible = false;
    },
    // 取消订单提交结束时间
    cancelCreatedEndTime() {
      this.params.createDateStart = "";
      this.params.createDateEnd = "";
      this.createdTimeRead = "";
      this.createdTimeEndVisible = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    confirmDdtjr(val, selectedList, judge) {
      this.params.reporter = "";
      this.createdByName = "";
      if (judge) {
        this.ddthrVisible = false;
        return;
      }
      this.params.reporter = val ? val : ""; //人员id
      let arr = [];
      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }
      this.createdByName = arr.join(",");
      this.ddthrVisible = false;
    },
    cancel() {
      this.params = Object.assign({}, formP);
      this.selectedType = [];
      this.params.type = "";
      this.params.typeText = "";
      this.params.goodsName = "";
      this.params.goodsCode = "";
      this.params.category = "";
      this.params.categoryText = "";
      this.prodcname = "";
      // this.$emit("resetCategory");
    },
    confirm() {
      // var keyword = this.$refs.topSearch.value;
      this.params.type = this.selectedType.join(",");
      this.$emit("getCategory", this.params);
    },
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.35rem;
  width: 100%;
  height: 100vh;
  background: #f5f5f5;
  z-index: 99;
  .formgroup {
    height: calc(100vh - 1.11rem);
    padding-bottom: 0.53rem;
    overflow-y: scroll;
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    font-size: 0.16rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      color: #fff;
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      color: #191f25;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0.03rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0 0.16rem 0.14rem;
}
</style>
